<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <meta name=referrer content=no-referrer>
    <title>Document</title>
    <link rel=stylesheet href=../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css>
    <link rel=stylesheet href=../css/base.css>
    <link rel=stylesheet href=../css/index.css>
    <style>
        .jumbotron {
            position: relative
        }

        h1 {
            background-color: #fff;
            display: flex;
            height:30px ;
            line-height: 30px;
        }

        h1>i {
            flex: 78%
        }

        h1>a{
            border: 0;
            background-color: #fff;
            flex: 5%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>a:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>a:active{
            background-color: #fff;
            text-decoration: none;
        }
        h1>button{
            border: 0;
            background-color: #fff;
            flex: 6%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>button:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>button:active{
            background-color: #fff;
            text-decoration: none;
        }
        img {
            display: block;
            width: 100%;
            height: 100%
        }

        .banner {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 3px solid #000;
            position: relative;
            overflow: hidden
        }

        .banner>ul {
            width: 500%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0
        }

        .banner>ul>li {
            float: left;
            width: 600px;
            height: 400px
        }

        .banner>ol {
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 20px;
            background: rgba(0, 0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center
        }

        .banner>ol>li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            margin: 0 15px;
            cursor: pointer
        }
        .banner>ol>li.active {
            background: red
        }

        .banner>div {
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .topbtn>a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            font-size: 30px;
            color: #fff;
            text-decoration: none
        }

        .topban {
            position: relative
        }

        .tagleft{
            position: absolute;
            top: 0;
            left: 50px;
            display: flex;
            flex-direction: column
        }
        .tagright{
            position: absolute;
            top: 0;
            right: 50px;
            display: flex;
            flex-direction: column
        }
        .catone{
            display: flex;
            flex-direction: column;
            height: 400px;
            border-radius: 10%;
            overflow: hidden;
        }
        .catone>li{
            width: 200px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
        }
        .catone>li>a{
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(0, 0, 0, 0);
            color: white;
            font-size: 20px;
        }
        .catone>li>a:hover{
            background-color: rgba(0, 0, 0, 0);
            color: sandybrown;
        }
        .catone>li>a:active{
            background-color: rgba(0, 0, 0, 0);
            border: rgba(0, 0, 0, 0);
        }
    </style>
</head>

<body>
    <div class=jumbotron>
        <h1><i></i> <a href=./reg.html role=button>注册</a>
            <a href=JavaScript:; name=login role=button>登录</a>
            <button name=logout role=button>退出登录</button>
            <button name=cart role=button>购物车</button>
        </h1>
        <div class=topban>
            <div class=banner>
                <ul class=clear></ul>
                <ol></ol>
                <div class=topbtn><a href=JavaScript:; name=left>&lt;</a> <a href=JavaScript:; name=right>&gt;</a></div>
            </div>
            <div class=tagleft>
                <ul class="catone">
                    <li><a  href="./list.html?cat_one_id=食品酒水" role=button>食品酒水</a></li>
                    <li><a  href="./list.html?cat_one_id=童装玩具" role=button>童装玩具</a></li>
                    <li><a  href="./list.html?cat_one_id=家装建材" role=button>家装建材</a></li>
                    <li><a  href="./list.html?cat_one_id=奶粉尿裤" role=button>奶粉尿裤</a></li>
                    <li><a  href="./list.html?cat_one_id=其他" role=button>其他</a></li>
                </ul>
            </div>
            <div class=tagright>
                <ul class="catone">
                    <li><a  href="./list.html?cat_one_id=大家电" role=button>大家电</a></li>
                    <li><a  href="./list.html?cat_one_id=海外购" role=button>海外购</a></li>
                    <li><a  href="./list.html?cat_one_id=钟表眼镜" role=button>钟表眼镜</a></li>
                    <li><a  href="./list.html?cat_one_id=皮具箱包" role=button>皮具箱包</a></li>
                    <li><a  href="./list.html?cat_one_id=邮币乐器" role=button>邮币乐器</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src=../js/jquery.min.js></script>
    <script src=../js/cookie.js></script>
    <script src=../js/tools.js></script>
    <script>
    const cookieObj = myGetCookie();
        $('[name="logout"]').click(function () {
            if (cookieObj.login === undefined) {
                window.alert('对不起您还没登陆');
            } else {
                mySetCookie('login', 1, -1, '/');
                window.alert('您已经成功退出登录');
            }
        });

        $('[name="cart"]').click(function () {
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没登陆，点击跳转登录')) {
                    window.location.href = './login.html';
                }
            } else {
                window.location.href = './cart.html';
            }
        });
        $('[name="login"]').click(function () {
            window.location.href = `./login.html?url=${window.location.href}`;
        })
        var arr = [
            { id: 1, width: 520, height: 280, size: 70, path: '1.png', type: 'PNG' },
            { id: 2, width: 520, height: 280, size: 70, path: '2.png', type: 'PNG' },
            { id: 3, width: 520, height: 280, size: 70, path: '3.png', type: 'PNG' },
            { id: 4, width: 520, height: 280, size: 70, path: '4.png', type: 'PNG' },
            { id: 5, width: 520, height: 280, size: 70, path: '5.png', type: 'PNG' },
        ];
        const oBanner = document.querySelector('.banner');
        const oUl = oBanner.querySelector('ul');
        const oOl = oBanner.querySelector('ol');

        let length = arr.length;
        let index = 1;
        let liWidth;
        let ullis;
        let ollis;
        let time;
        let bool = true;

        setPage(arr);
        autoLoop();
        setInOut();
        setClick();
        function setPage(array) {
            let ulStr = '';
            let olStr = '';
            array.forEach((item, key) => {
                ulStr += `<li ><img src="../message/${item.path}"></li>`;
                olStr += key === 0 ? `<li class = "active" name="olli" num="${key}"></li>` : `<li name="olli" num="${key}"></li>`;
            })
            oUl.innerHTML = ulStr;
            oOl.innerHTML = olStr;


            ullis = oUl.querySelectorAll('li');
            ollis = oOl.querySelectorAll('li');

            const first = ullis[0];
            const last = ullis[length - 1];

            const cloneFirst = first.cloneNode(true);
            const cloneLast = last.cloneNode(true);

            oUl.appendChild(cloneFirst);
            oUl.insertBefore(cloneLast, first);

            liWidth = parseInt(myGetStyle(first, 'width'));
            console.log(liWidth);

            oUl.style.width = (length + 2) * liWidth + 'px';

            oUl.style.left = -liWidth * index + 'px';
        }
        function autoLoop() {

            time = setInterval(() => {
                index++;

                setFocusStyle();
                move(oUl, { left: -index * liWidth }, loopEnd)

            }, 3000);
        }
        function loopEnd() {
            if (index === length + 1) {
                index = 1;
                oUl.style.left = -liWidth * index + 'px';
            } else if (index === 0) {
                index = length;
                oUl.style.left = -liWidth * index + 'px';
            }
            bool = true;
        }
        function setFocusStyle() {
            ollis.forEach(item => {
                item.classList.remove('active');
            })
            if (index === length + 2 - 1) {
                ollis[0].classList.add('active');
            } else if (index === 0) {
                ollis[length - 1].classList.add('active');
            } else {
                ollis[index - 1].classList.add('active');
            }
        }
        function setInOut() {
            oBanner.addEventListener('mouseenter', () => {
                clearInterval(time);
            })
            oBanner.addEventListener('mouseleave', () => {
                autoLoop();
            })
        }
        function setClick() {
            oBanner.addEventListener('click', e => {
                if (e.target.getAttribute('name') === 'left') {
                    if (bool) {
                        bool = false;
                    } else {
                        return;
                    }
                    index--;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth - 1 }, loopEnd)
                } else if (e.target.getAttribute('name') === 'right') {
                    if (bool) {
                        bool = false;
                    } else {
                        return;
                    }
                    index++;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth - 1 }, loopEnd)
                } else if (e.target.getAttribute('name') === 'olli') {
                    if (bool) {
                        bool = false;
                    } else {
                        return;
                    }
                    index = e.target.getAttribute('num') - 0 + 1;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth - 1 }, loopEnd)
                }
            })
        }
        function hide() {
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'hidden') {
                    clearInterval(time)
                } else if (document.visibilityState === 'visible') {
                    autoLoop();
                }
            })
        }</script>
    <script></script>
</body>

</html>